<template>
    <div id="conversationList" class="panel">
        <CellGroup ref="cellGroup" @on-click="click">

                <Cell v-for="(item, index) in conversationData"
                      :key="index"
                      :name="index"
                      :selected="selectedCellIndex===index">
                    <Avatar shape="square" icon="md-person" solt="icon" />
                    <div class="info">
                        <Row>
                            <Col>
                                <Row>
                                    <Col class="nick-name">
                                        {{item.username}}
                                    </Col>
                                    <Col class="time">
                                        {{item.time}}
                                    </Col>
                                </Row>
                                <Row>
                                    <Col class="content" v-text="handleContent(item)">
                                    </Col>
                                    <Col class="badge">
                                        <Badge :count="getUnReadCount(item.username)" overflow-count="99" :offset="[3, 0]">
                                        </Badge>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </div>
                </Cell>
        </CellGroup>
    </div>
</template>

<script>
    export default {
        name: 'ChatConversationList',
        props: {
            conversationData: Array
        },
        data () {
            return {
                selectedCellIndex: ''
            };
        },
        methods: {
            click (index) {
                this.selectedCellIndex = index;
                this.$emit('on-select', this.conversationData[index]);
                // 解决数组数据变化，但是样式未更新问题
                this.$forceUpdate();
            },
            changeSelectedCellIndex (username) {
                let list = this.conversationData;
                for (let i = 0; i < list.length; i++) {
                    let item = list[i];
                    if (item.username === username) {
                        this.selectedCellIndex = i;
                        break;
                    }
                }
            },
            handleContent (item) {
                let msgType = this.$im.msgType[item.type];
                if (msgType && msgType.value && msgType.desc) {
                    return msgType.desc;
                }
                return item.content;
            },
            getUnReadCount (username) {
                let idList = this.$store.state.chat.unReadMsgObj[username];
                if (idList) {
                    return idList.length;
                }
                return 0;
            }
        }
    };
</script>

<style scoped lang="less">
    @cellWidth: 300px;
    @cellPadding: 16px;
    @avatarWidth: 32px;
    @scrollWidth: 6px;
    @infoWidth: @cellWidth - @cellPadding * 2 - @avatarWidth - @scrollWidth;
    @infoLeftPadding: 8px;
    @timeWidth: 62px;
    @nickNameWidth: @infoWidth - @infoLeftPadding - @timeWidth;
    @badgeWidth: 30px;
    @contentWidth: @infoWidth - @infoLeftPadding - @badgeWidth;
    .panel {
        height: 520px;
        overflow-y: scroll;
    }
    .info {
        padding-left: @infoLeftPadding;
        width: @infoWidth;
        float: right;
        color: #fff;
        font-size: 12px;
        line-height: 12px;
    }
    .nick-name {
        overflow: hidden;
        text-overflow:ellipsis;
        color: #fff;
        width: @nickNameWidth;
        float: left;
    }
    .time {
        width: @timeWidth;
        float: left;
        color: #989898;
        text-align: right;
    }
    .content {
        float: left;
        width: @contentWidth;
        overflow: hidden;
        text-overflow:ellipsis;
        margin-top: 8px;
        color: #989898;
    }
    .badge {
        float: left;
        width: @badgeWidth;
        text-align: right;
    }
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #c3c3c3;
    }
    ::-webkit-scrollbar-track {
        background-color: transparent;
    }
</style>

<style lang="less">
    #conversationList {
        @background: #3a3f45;
        .ivu-cell-selected, .ivu-cell.ivu-cell-selected:hover {
            background: @background;
        }
        .ivu-cell:hover{
            background: @background;
        }
    }
</style>
